<template>
    <div>
        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="2" :offset="0">
                <el-button type="primary" plain @click="dialogvisible = true" icon="el-icon-plus" size="medium">新增</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" border stripe>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="text" label="键"></el-table-column>
            <el-table-column prop="value" label="值"></el-table-column>
            <el-table-column fixed="right" label="操作" width="190">
                <template slot-scope="scope">
                    <editAndDelete :scope="scope" @editHandle="editHandleClick" @deleteHandle="deleteHandleClick"></editAndDelete>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="dialogTitle" :visible.sync="dialogvisible" width="20%" append-to-body @close="dialogColse" >
            <el-form :model="form" ref="form" label-width="50px" :inline="false" size="normal" v-loading="formLoad">
                <el-form-item label="键">
                    <el-input v-model="form.text"></el-input>
                </el-form-item>
                <el-form-item label="值">
                    <el-input v-model="form.value"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="dialogvisible = false">取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>


    </div>
</template>

<script>
import { getList,insertItem,updateItem,deleteItem } from "@/api/system/dicItem";
import editAndDelete from "@/components/tableEditDelete.vue"

export default {
    created() {
        this.loadData();
    },
    components:{
        editAndDelete
    },
    data() {
        return {
            tableData: [],
            form: {
                id:'',
                text: '',
                value: '',
                parentCode:this.dicId
            },
            dialogvisible: false,
            dialogTitle:'新增字典项',
            formLoad:false
        }
    },
    props: {
        dicId: String,
        dicCode: String
    },
    methods: {
        async loadData() {
            let result = await getList(this.dicCode)
            if (result.code == 10000) {
                this.tableData = result.data
            } else {
                this.$message({
                    message: result.msg,
                    type: 'error'
                })
            }
        },
        dialogColse() {
            this.form = {
                text: '',
                value: '',
                id:'',
                parentCode:this.dicId
            }
        },
        async onSubmit() {
            this.formLoad = true
            let result = {
                code : -1
            };
            if (this.form.id) {
                //edit
                result = await updateItem(this.form)
            }else{
                result = await insertItem(this.form)
            }
            if (result.code==10000) {
                this.$message({
                    type:'success',
                    message:'保存成功'
                })
                this.loadData()
                this.dialogvisible = false
            }else{
                this.$message({
                    type:'error',
                    message:result.msg
                })
            }
            this.formLoad = false
        },
        editHandleClick(row){
            this.form = {
                id:row.id,
                text: row.text,
                value: row.value,
                parentCode:this.dicId
            }
            this.dialogTitle = "编辑字典项"
            this.dialogvisible = true
        },
        async deleteHandleClick(row){
            let result = await deleteItem(row.id)
            if (result.code==10000) {
                this.$message({
                    type:'success',
                    message:'删除成功'
                })
                this.loadData()
            }
        }
    }
}
</script>

<style  scoped></style>